<template>
	<view class='content' v-if="showquestion">
		<view class='question'>
			<view class='nums'>第 {{currentquesindex}} 题（{{currentquesindex}}/{{total}}）</view>
			<view class="qusname">{{items.title}}<text class='time'>（{{time}}s）</text></view>
			<view class='answers'>
				<view v-if='isNoSwlect' class='boxShow'></view>
				<radio-group @change="radioChange">
				    <label class="uni-list-cell uni-list-cell-pd aclabel" v-for="(item, index) in items.answer" :key="item.key">
						<view>
							<radio color="#4CD964" :value="item.key" :checked="index == current" :disabled='disabled'  />
						</view>
						<view>{{item.key}}:{{item.value}}</view>
					</label>
				</radio-group>
				<view v-if="rightkey"  class='rightkey'>正确答案：{{items.correct_answer}}</view> 
			</view>
			<view v-if="confirmshow" class="confirm" @click="confirm">确定</view>
			<view v-if='nextquestion' class="confirm" @click="nextq">下一题</view>
			<view v-if="postresult" class="confirm" @click="submitPost">提交</view>
		</view>
	</view>
</template>

<script>
	import api from '@/pages/utils/api.js';
	export default {
		data(){
			return{
				showquestion:false,
				questiontype:'', //题目类型
				total:'', //总题目数
				questionlist:[], //所有题目集合列表
				questionkey:0, // 第几题第几题
				time:1, //计时时间
				totaltime:'',
				flag:true,
				disabled:false,
				current: null,
				nextquestion:false,
				postresult:false,
				confirmshow:true,
				isNoSwlect:false,
				isRightKey:"", //后台设置的正确答案
				currentSelectKey:'', //选中的答案值
				rightkey:false,
				currentquesindex:1,  //显示当前第几题
				isAnswersRight:'',//后台设置答对的题目（通过与答对了多少题作比较确定是否通过本次答题）
				isAnswersRightTotal:0, //记录最后总共答对了多少题
			    items:{}	//当前展示题目	
			}
		},
		onLoad(option) {
			
		}, 
		onShow() {
			uni.showLoading({
			      title: '加载中...'
			  });
			this.continues();	
		},
		
		methods:{
			toback:function(){
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			
			//继续答题
			continues:function(){
				var vm = this;
				//获取题目类型
				api.getAnsWerType({ 
					
				}).then(res=>{
					if(res.code == 1){ 
						vm.questiontype = res.data.id; //题目类型
						api.checkAnswerLog({ //根据题目类型判断当前用户是否有资格答题
							ansc_id:vm.questiontype
						}).then(res=>{
							if(res.code == 1){ //可以继续答题 
								vm.getTopics(vm.questiontype);//获取题目
							}else{
								console.log(res)
								uni.showToast({
								    title: res.msg,
									position:'bottom',
									icon:"none",
								    duration: 2000
								});
							}
						});
					}
				});
			},
			//取消答题
			cancel:function(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			}, 
			
			//根据题目类型获取题目 
			getTopics:function(t){
				var vm = this;
				api.getTopics({
					c_id:t
				}).then(res=>{
					if(res.code == 1){ 
						uni.hideLoading();
						vm.showquestion = true;
						vm.questionlist = res.data.topic_list; //题目列表
						vm.items = res.data.topic_list[0];
						vm.total = res.data.setting.total; 
						vm.time = res.data.setting.seconds; 
						vm.totaltime = res.data.setting.seconds;
						vm.isAnswersRight = res.data.setting.few; //后台设置的答对多少题就通过
						vm.isAnswersRightTotal = 0;//清空答对题记录
						setInterval(vm.jishiTime,1000); //答题倒计时
					}
				});
			}, 
			 radioChange: function(evt) {
				var vm = this;
				vm.currentSelectKey =  evt.detail.value; //选中的答案值
				for (let i = 0; i < this.items.answer.length; i++) {					if (this.items.answer[i].key === evt.target.value) {						this.current = i;						break;					}				};
			},		
			confirm: function(){
				var vm = this;
				if(vm.currentSelectKey == ''){
					uni.showToast({
					    title: '请选择正确答案',
						position:'bottom',
						icon:"none",
					    duration: 2000
					});
				}else{
					if(vm.currentSelectKey == vm.items.correct_answer){
						vm.isAnswersRightTotal = vm.isAnswersRightTotal + 1; //每次答对一题记录
						vm.nesxtQuestion();//答对下一题
					}else{
						// vm.isNoSwlect = true;
						vm.rightkey = true;
						vm.nextquestion = true;
						vm.confirmshow = false;
						vm.disabled = true;
						// clearInterval(vm.jishiTime); //清除答题倒计时
					};
				};
			},
			
			//提交结果
			submitPost: function(){
					var vm = this;
					if(vm.currentSelectKey == '' && vm.time > 0){
						uni.showToast({
							title: '请选择正确答案',
							position:'bottom',
							icon:"none",
							duration: 2000
						}); 
						return;
					}else{
						if(vm.currentSelectKey == vm.items.correct_answer){
							vm.isAnswersRightTotal = vm.isAnswersRightTotal + 1; //每次答对一题记录
						};
						if(vm.isAnswersRightTotal >= vm.isAnswersRight){ //总的答对数 >= 后台设置的答对数 就通过
							var is_success = 2;
						}else{
							var is_success = 1;
						};
						api.answerResults({
							ansc_id:vm.questiontype,
							is_success:is_success
						}).then(res=>{
							if(res.code == 1){
								uni.showModal({
									title: '提示',
									content: '恭喜您已经完成答题',
									confirmText:'查看记录',
									success: function (res) {
										if (res.confirm) {
										   uni.switchTab({
											   url: '/pages/member/index'
										   });
										} else if (res.cancel) {
										  uni.switchTab({
											  url: '/pages/index/index'
										  });
										}
									}
								});
							}
						});
					};
			},
			
			nextq:function(){
				this.nesxtQuestion();//下一题
			},
			//倒计时
			jishiTime:function(){
				var vm = this;
				// vm.currentquesindex == vm.total
				if(vm.time == 0){
					if(vm.currentSelectKey != vm.items.correct_answer){
						vm.disabled = true;
						vm.rightkey = true;
						vm.confirmshow = false;
						if(vm.currentquesindex != vm.total){
							vm.nextquestion = true;
						};
					}
					return;
				};
				vm.time = vm.time-1;
			},
			//下一题 
			nesxtQuestion:function(){
				var vm = this;
				vm.time = vm.totaltime;  //重置时间
				vm.rightkey = false;
				vm.isNoSwlect = false;
				vm.disabled = false;
				vm.confirmshow = true;
				vm.nextquestion = false;
				vm.currentSelectKey = '';
				vm.current = null;
				vm.questionkey = ++vm.questionkey;
				vm.currentquesindex = ++vm.currentquesindex;
				if(vm.currentquesindex == vm.total){
					vm.postresult = true;
					vm.nextquestion = false;
					vm.confirmshow = false;
				}
				vm.items = vm.questionlist[vm.questionkey];
			}
		},
		
	}
</script>

<style>
	.btns{
		display: flex;
		text-align: center;
		font-size: 15px;
		margin-top: 3rem;
	}
	.btns .continues{
		background: #FFCA30;
		color: #FFF;
		flex:1;
		padding: 5px 0;
		margin-right: 1rem;
		border-radius: 3px;
	}
	.btns .cancel{
		background: #CCC;
		color: #FFF;
		flex:1;
		padding: 5px 0;
		border-radius: 3px;
	}
	.content{
		height: 100%;
		background-position: center;
		background-size: cover;
		background-image: url(../../static/imgs/dtbg.jpg);
		background-repeat: no-repeat;
		width: 100%;
		position: absolute;
		overflow: hidden;
		margin: 0;
	}
	.title{
		color: #FFCA2E;
		text-align: center;
		font-size: 1.5rem; 
		padding: 0 0 1rem 0;
	}
	.time{
		font-size: 12px;
		color:#777;
	}
	.answers{
		position: relative;
	}
	.boxShow{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background: #ccc;
		opacity: .4;
	}
	.question{
		position: relative;
		background: #FFF;
		padding: 1rem 1rem .5rem 1rem;
		width: 75%;
		border-radius: 10px;
		margin:2rem auto 0 auto;
	}
	.nums{
		position: absolute;
		background: #FFCA30;
		color: #FFF;
		width: 8rem;
		padding: 7px 5px;
		font-size: 14px;
		text-align: center;
		border-radius: 0 0 1.2rem 1.2rem;
		top: 0;
		left: calc(50% - 4rem);
	}
	.qusname{
		padding: 2rem 0 1rem 0;
		font-size: 15px;
	}
	.aclabel{
		display: flex;
		padding: .5rem 0;
		font-size: 14px;
	}
	.confirm{
		background: #FFCA30;
		color: #FFF;
		text-align: center;
		padding: 5px 10px;
		border-radius: 5px;
		width:5rem;
		margin: 1rem auto 1rem auto;
		font-size: 14px;
	}
	.rightkey{
		margin-top: .5rem;
		padding: 1rem 0 0 0;
		color: #DD524D;
		border-top: 1px dashed #DD524D;
		font-size: 15px;
	}
</style>
